'use client'

import React from 'react';
import Editor, { OnChange, OnMount } from '@monaco-editor/react';

interface CodeEditorProps {
  language?: string;
  value?: string;
  onChange?: OnChange;
  height?: string | number;
  readOnly?: boolean;
  options?: object;
  theme?: string;
  defaultValue?: string; // Added to pass template or initial code
}

const CodeEditorComponent: React.FC<CodeEditorProps> = ({
  language = 'javascript',
  value,
  onChange,
  height = '400px',
  readOnly = false,
  options,
  theme = 'vs-dark', // vs-dark is a common theme, or use 'light'
  defaultValue,
}) => {

  const handleEditorDidMount: OnMount = (editor, monaco) => {
    // You can use the editor instance here if needed
    // For example, to set up custom keybindings or other editor features
    // monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
    //   target: monaco.languages.typescript.ScriptTarget.ES2020,
    //   allowNonTsExtensions: true,
    // });
  };

  return (
    <Editor
      height={height}
      language={language.toLowerCase()} // Ensure language is lowercase for Monaco
      value={value}
      defaultValue={defaultValue} // Use this for initial template code
      onChange={onChange}
      onMount={handleEditorDidMount}
      theme={theme}
      options={{
        selectOnLineNumbers: true,
        readOnly: readOnly,
        minimap: { enabled: true },
        fontSize: 14,
        scrollBeyondLastLine: false,
        automaticLayout: true, // Important for responsive resizing
        wordWrap: 'on', // Enable word wrapping
        ...options, // Allow overriding default options
      }}
    />
  );
};

export default CodeEditorComponent; 